<template>
<view>
	<!-- 头部 -->
	<view class="input">
				<view class="search-bar">
					<image class="search-icon" src="../../static/diancan/1.png"></image>
					<input type="text" class="search-input" placeholder="蜡笔小新" />
				</view>
				<view class="search-bar-rightimg">
					<image class="search-icon-rightimg" src="../../static/diancan/2.png"></image>
				</view>
				<view class="Gpss">
					<view><text class="Gpss-text">快取店</text>广西汽信学院店</view>
					<image class="Gpss-icon" src="../../static/diancan/3.png"></image>
				</view>
				<view class="Gpss2">
						<text class="Gpss-text2">开启定位</text>
						<text class="Gpss-text3">,  为您推荐附近门店</text>
				</view>
				
				<view class="wpwp">
					<view class="wp2"><text style="line-height: 32px;padding-left: 27px;">外卖</text></view>
					<view class="wp1"><text style="line-height: 32px;padding-left: 0;">自取</text></view>				
				</view>
	</view>
		<!-- 内容   左边纵向滑动栏-->
	<view class="cont">
		<scroll-view class="scroll-view_left" scroll-y='true' @scroll="scroll">
			<view class="scroll-view-item" v-for="(tab,index) in tabBars" :class="navIndex==index ? 'activite' : ''" @tap="checkIndex(index)">
				{{tab.name}}
			</view>
		</scroll-view>
		<!-- 右边纵向滑动栏 -->
		<swiper vertical :current="navIndex" @change="tabChange" class="tab-right">
			<swiper-item class="swiper_item">
						<view class="toubu">爆品推荐</view>
						<view class="daimage"><img src="../../static/diancan/da1.png"></img></view>
				<view class="top1">
						<view class="nr">
							<view class="image1"><img src="../../static/diancan/4.png"></img></view>
							<scroll-view scroll-x class="top-bottem">
								<view class="h1">生椰拿铁</view>
								<view class="kuang"><view class="left">人气王</view><view class="right">冷热可选</view></view>
								<view class="san">生椰口感哪家强，我是人气top王</view>
								<view class="price">￥<text style="color: #a72338;font-size: 19px;">9.9</text>全场9.9元不限量</view>
								<view class="price2">￥13.9<text style="text-decoration: line-through;color: #b5b5b5;padding-left: 4px;">￥32</text>
								</view>
								<view class="image2"><img src="../../static/diancan/jia.png"></img></view>
							</scroll-view>
						</view>
				</view>
				<view class="top2">
						<view class="nr">
							<view class="image1"><img src="../../static/diancan/5.png"></img></view>
							<scroll-view scroll-x class="top-bottem">
								<view class="h1">潘帕斯蓝生酪茉莉拿铁</view>
								<view class="kuang"><view class="left">好喝到能记住名字</view><view class="right">冷饮限定</view></view>
								<view class="san">颜值冠军，不挡茉莉生酪的多重香韵</view>
								<view class="price">￥<text style="color: #a72338;font-size: 19px;">9.9</text>全场9.9元不限量</view>
								<view class="price2">￥13.9<text style="text-decoration: line-through;color: #b5b5b5;padding-left: 4px;">￥32</text>
								</view>
								<view class="image2"><img src="../../static/diancan/jia.png"></img></view>
							</scroll-view>
						</view>
				</view>
				<view class="top3">
						<view class="nr">
							<view class="image1"><img src="../../static/diancan/6.png"></img></view>
							<scroll-view scroll-x class="top-bottem">
								<view class="h1">经典拿铁</view>
								<view class="kuang"><view class="left">迎接更多经典瞬间</view><view class="right">冷热可选</view></view>
								<view class="san">生椰口感哪家强，我是人气top王</view>
								<view class="price">￥<text style="color: #a72338;font-size: 19px;">9.9</text>全场9.9元不限量</view>
								<view class="price2">￥11.5<text style="text-decoration: line-through;color: #b5b5b5;padding-left: 4px;">￥32</text>
								</view>
								<view class="image2"><img src="../../static/diancan/jia.png"></img></view>
							</scroll-view>
						</view>
				</view>
				<view class="top4">
						<view class="nr">
							<view class="image1"><img src="../../static/diancan/7.png"></img></view>
							<scroll-view scroll-x class="top-bottem">
								<view class="h1">高山抹茶清爽椰</view>
								<view class="kuang"><view class="left">非咖啡</view><view class="right">冷热可选</view></view>
								<view class="san">高山鲜叶，海边生椰，这口超清爽！</view>
								<view class="price">￥<text style="color: #a72338;font-size: 19px;">9.9</text>全场9.9元不限量</view>
								<view class="price2">￥13.9<text style="text-decoration: line-through;color: #b5b5b5;padding-left: 4px;">￥32</text>
								</view>
								<view class="image2"><img src="../../static/diancan/jia.png"></img></view>
							</scroll-view>
						</view>
				</view>
				<view class="top5">
						<view class="nr">
							<view class="image1"><img src="../../static/diancan/8.png"></img></view>
							<scroll-view scroll-x class="top-bottem">
								<view class="h1">柚见美式</view>
								<view class="kuang"><view class="left">冷热可选</view><view class="left">0脂</view><view class="right">富含真果汁</view></view>
								<view class="san">柚见维C,清新美式</view>
								<view class="price">￥<text style="color: #a72338;font-size: 19px;">9.9</text>全场9.9元不限量</view>
								<view class="price2">￥11.9<text style="text-decoration: line-through;color: #b5b5b5;padding-left: 4px;">￥26</text>
								</view>
								<view class="image2"><img src="../../static/diancan/jia.png"></img></view>
							</scroll-view>
						</view>
				</view>
				<view class="top6">
						<view class="nr">
							<view class="image1"><img src="../../static/diancan/9.png"></img></view>
							<scroll-view scroll-x class="top-bottem">
								<view class="h1">流云茉莉轻乳茶</view>
								<view class="kuang"><view class="left">非咖啡</view><view class="left">全新升级</view><view class="right">冷热可选</view></view>
								<view class="san">真茶现泡，茉莉花香，一口鲜灵入心底</view>
								<view class="price">￥<text style="color: #a72338;font-size: 19px;">9.9</text>全场9.9元不限量</view>
								<view class="price2">￥11.9<text style="text-decoration: line-through;color: #b5b5b5;padding-left: 4px;">￥26</text>
								</view>
								<view class="image2"><img src="../../static/diancan/jia.png"></img></view>
							</scroll-view>
						</view>
				</view>			
			</swiper-item>
			<swiper-item class="swiper_item ">
				<view class="toubu">当季新品</view>
				<view class="daimage"><img src="../../static/diancan/da1.png"></img></view>
					<view class="nr">
						<view class="image1"><img src="../../static/diancan/4.png"></img></view>
						<scroll-view scroll-x class="top-bottem">
							<view class="h1">潘帕斯蓝生酪茉莉拿铁</view>
							<view class="kuang"><view class="left">人气王</view><view class="right">冷热可选</view></view>
							<view class="san">生椰口感哪家强，我是人气top王</view>
							<view class="price">￥<text style="color: #a72338;font-size: 19px;">9.9</text>全场9.9元不限量</view>
							<view class="price2">￥13.9<text style="text-decoration: line-through;color: #b5b5b5;padding-left: 4px;">￥32</text>
							</view>
							<view class="image2"><img src="../../static/diancan/jia.png"></img></view>
						</scroll-view>
					</view>
			</swiper-item>
			<swiper-item class="swiper_item">
				定制套餐
			</swiper-item>
			<swiper-item class="swiper_item">
				金奖美式
			</swiper-item>
			<swiper-item class="swiper_item">
				经典奶咖
			</swiper-item>
			<swiper-item class="swiper_item">
				元气果咖
			</swiper-item>
			<swiper-item class="swiper_item">
				生椰拿铁
			</swiper-item>
			<swiper-item class="swiper_item">
				生酪拿铁
			</swiper-item>
			<swiper-item class="swiper_item">
				燕麦拿铁
			</swiper-item>
			<swiper-item class="swiper_item">
				米乳拿铁
			</swiper-item>
			<swiper-item class="swiper_item">
				清爽果茶
			</swiper-item>
			<swiper-item class="swiper_item">
				高山抹茶
			</swiper-item>
			<swiper-item class="swiper_item">
				浓郁奶茶
			</swiper-item>
			<swiper-item class="swiper_item">
				奶昔冰沙
			</swiper-item>
			<swiper-item class="swiper_item">
				其他饮品
			</swiper-item>
			<swiper-item class="swiper_item">
				甜点筒餐
			</swiper-item>
		</swiper>		
	</view> 
</view>	
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				navIndex: 0,
				tabBars:[
					{name:'爆品推荐'},{name:'当季新品'},{name:'定制套餐'},{name:'金奖美式'},
					{name:'经典奶咖'},{name:'元气果咖'},{name:'生椰拿铁'},{name:'生酪拿铁'},
					{name:'燕麦拿铁'},{name:'米乳拿铁'},{name:'清爽果茶'},{name:'高山抹茶'},
					{name:'浓郁奶茶'},{name:'奶昔冰沙'},{name:'其他饮品'},{name:'甜点筒餐'}
				],
				
			}
		},
		methods: {
			checkIndex(index) {
				this.navIndex = index;
			},
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			tabChange(e) {
				const navIndex = e.detail.current
				this.navIndex = navIndex
			},
		}
	}
</script>

<style>
	
.tab-right{
	position: sticky;
	top: 160px;
	width: 18.9rem;
	height: 54rem;
	background-color: #fff;
    margin-left: 4.66rem;
    margin-top: -45rem;
	}
.tab-right .nr{
	position: relative;
	margin-bottom: 5px;
}	
.top-bottem{
	display: flex;
	justify-content: space-between;
	position: absolute;
	top: 0;
    left: 7rem;
}
.swiper_item{padding-left: 10px;}		
.tab-right .toubu{font-weight: 600;padding: 10px 0;}
.tab-right .daimage img{height: 4.525rem;border-radius: 10px;padding: 0 5px 5px 0;}
.tab-right .image1 img{height: 6.5rem;}
.tab-right .h1{font-weight: 500;font-size: 15px;}
.tab-right .kuang{display: flex;color: #a82336;font-size: 12px;padding: 3px;}
.kuang::after{ bottom: -1px; width: 100%;}
.tab-right .left{border: 0.5px solid #a72338;margin-right: 5px;}
.tab-right .right{border: 0.5px solid #a72338;}
.tab-right .san{font-size: 10px;color: #b5b5b5;}
.tab-right .price{color: #a82336;font-size: 10px;}
.tab-right .price2{font-size: 12px; color: #a2a19e;}
.tab-right .image2 img{width: 20px;height: 20px;position: absolute;top: 4.6rem;left: 9rem;}
.scroll-view-item{
	text-align: center;
	color: #b9b9b9;
	font-size: 13px;
	padding: 17px 0;
}
.activite{
		background-color: #fff;
		color: #303030;
		font-weight: 600;
		border-left: 3.5px solid #a72338;
	}
.scroll-view_left{
	position: sticky;
    top: 2.4rem;
	width: 4.9rem;
	height: 45rem;
	background-color: #f6f6f6;
}

.wpwp{
	width: 5.125rem;
	height: 0.5rem;
    padding: 15px 10px;
	font-size: 14px;
    position: relative;
    top: -1.8rem;
    right: -16.5rem;
}
.wp1{
	width: 3.2rem;
	height: 1.9rem;
	color: #fff;
	text-align: center;
	background-color: #a72338;
	border-radius: 20px;
	position: relative;
	top: -3.1rem;
	right: 0.2rem;
}
.wp2{
    width: 3.8rem;
    height: 1.9rem;
    color: #a2a19e;
    background-color: #f6f6f6;
    border-radius: 20px;
    position: relative;
    top: -1.2rem;
    right: -2rem
}
.Gpss2{
	padding-left: 11px;
	padding-top: 4px;
	font-size: 11px;
}
.Gpss-text2{
	color: #6dc1fb;
	border-bottom: 1px solid #6dc1fb;
}
.Gpss-text3{
	color: #a4a2a6;
}
.Gpss{
	display: flex;
	align-items: center;
	color: #1b261d;
	font-size: 15px;
	padding-left: 11px;
}	
.Gpss .Gpss-text{
	color: #fff;
	background-color: #a82336;
	font-size: 10px;
	padding: 0 4px;
	margin-right: 5px;
}
.Gpss-icon{
	width: 0.7rem;
	height: 0.6rem;	
	padding-left: 3px;
}
.input{
	z-index: 9;
	position: sticky;
	top: 44px;
	width: 100%;
	height: 7rem;
	background-color: #ffff;
}
.search-bar-rightimg{
	position: relative;
	top: -0.7rem;
	right: -9rem;
}
.search-icon-rightimg{
	width: 5.9rem;
	height: 1.7rem;
}
 .search-bar {
    display: flex;
    align-items: center;
    background-color: #f5f5f5;
    width: 5.375rem;
    height: 0.7rem;
    border-radius: 20px;
    padding: 13px 0 10px 10px;
    position: relative;
    top: 1.2375rem;
    right: -1.0rem;
  }
  .search-icon {
    width: 20px;
    height: 20px;
    margin-right: 3px;
  }
  .search-input {
    flex: 1;
	font-size: 11px;
    border: none;
    outline: none;
  }
</style>
